<template>
	<z-paging
		class="fixed"
		ref="paging"
		:auto="auto"
		v-model="list"
		refresher-threshold="160rpx"
		@query="queryList"
		:useVirtualList="useVirtualList"
		:useInnerList="useInnerList"
		:cellKeyName="cellKeyName"
		:innerListStyle="innerListStyle"
		:preloadPage="preloadPage"
		:cellHeightMode="cellHeightMode"
		:virtualScrollFps="virtualScrollFps"
		show-refresher-update-time
		auto-show-back-to-top
		loading-full-fixed
		safe-area-inset-bottom
		scroll-with-animation
		show-refresher-when-reload
		:loading-more-loading-text="{ en: '英文的加载中', 'zh-cn': '中文的加载中', 'zh-hant-cn': '繁体的加载中' }"
	>
		<!-- show-refresher-when-reload -->
		<!-- :show-loading-more-no-more-template="true" -->
		<!-- loading-full-fixed -->
		<!-- auto-show-system-loading -->
		<!-- system-loading-text="loading..." -->
		<!-- scroll-with-animation 在设置滚动条位置时使用动画过渡 -->
		<!-- inside-more 当分页未满一屏时，是否自动加载更多(nvue无效) -->
		<!-- show-refresher-update-time 是否显示最后更新时间   -->
		<!-- auto-show-back-to-top 自动显示点击返回顶部按钮 -->
		<!-- refresher-f2-enabled  是否开启二楼 -->
		<template #top>
			<slot name="top" />
		</template>
		<template #bottom>
			<slot name="bottom" />
		</template>

		<template #empty>
			<!-- <z-paging-empty-view
				emptyViewImg="/static/empty.png"
				:emptyViewImgStyle="{
					width: '50vw',
					height: '50vw',
				}"
				@reload="reload"
				@viewClick="reload"
				emptyViewText="暂无数据，点击重试~"
			>
			</z-paging-empty-view> -->
			<yy-empty @reload="reload"></yy-empty>
		</template>
		<template #cell="{ item, index }">
			<slot name="cell" :item="item" :index="index" />
		</template>

		<template #refresherF2>
			<view class="p-3">
				<view class="flex items-center justify-center p-1 text-white bg-gray-800 rounded-md">
					松手可以进入二楼哦 (*╹▽╹*)
				</view>
			</view>
		</template>

		<template #f2>
			<slot name="f2" />
		</template>
		<template #loadingMoreNoMore>
			<yy-nomore></yy-nomore>
		</template>

		<!-- <template #refresher="{ refresherStatus }">
			<yy-refresher :status="refresherStatus" />
		</template> -->

		<slot />
	</z-paging>
</template>

<script setup>
const emits = defineEmits(['input', 'query', 'update:modelValue']);

const props = defineProps({
	// 用于接收父组件v-model所绑定的list的值
	value: {
		type: Array,
		default: function () {
			return [];
		},
	},
	auto: {
		type: Boolean,
		default: true,
	},
	// 是否使用虚拟列表，默认为否
	useVirtualList: {
		type: Boolean,
		default: false,
	},
	// 是否在z-paging内部循环渲染列表(内置列表)，默认为否。若use-virtual-list为true，则此项恒为true
	useInnerList: {
		type: Boolean,
		default: false,
	},
	// 内置列表cell的key名称，仅nvue有效，在nvue中开启use-inner-list时必须填此项
	cellKeyName: {
		type: String,
		default: '',
	},
	// innerList样式
	innerListStyle: {
		type: Object,
		default: function () {
			return {};
		},
	},
	// 预加载的列表可视范围(列表高度)页数，默认为7，即预加载当前页及上下各7页的cell。此数值越大，则虚拟列表中加载的dom越多，内存消耗越大(会维持在一个稳定值)，但增加预加载页面数量可缓解快速滚动短暂白屏问题
	preloadPage: {
		type: [Number, String],
		default: 7,
	},
	// 虚拟列表cell高度模式，默认为fixed，也就是每个cell高度完全相同，将以第一个cell高度为准进行计算。可选值【dynamic】，即代表高度是动态非固定的，【dynamic】性能低于【fixed】。
	cellHeightMode: {
		type: String,
		default: 'fixed',
	},
	// 虚拟列表scroll取样帧率，默认为60，过高可能出现卡顿等问题
	virtualScrollFps: {
		type: [Number, String],
		default: 60,
	},
});

const paging = ref(null);
let list = ref([]);

watch(
	() => props.value,
	(newVal) => {
		list.value = newVal;
	}
);
// #ifdef VUE3
watch(
	() => props.modelValue,
	(newVal) => {
		list.value = newVal;
	}
);
// #endif

watch(
	() => list.value,
	(newVal) => {
		emits('input', newVal);
		// #ifdef VUE3
		emits('update:modelValue', newVal);
		// #endif
	}
);

// 监听z-paging的@query事件，通过emit传递给页面
const queryList = (pageNo, pageSize) => {
	emits('query', pageNo, pageSize);
};

// 接收页面触发的reload方法，传给z-paging
const reload = (data) => {
	paging.value.reload(data);
};

// 接收页面触发的complete方法，传给z-paging
const complete = (data) => {
	paging.value.complete(data);
};

/*
	// 如果是使用页面滚动，则需要添加以下三个方法，注意页面那边要引入hooks，与使用页面滚动示例写法相同。
	// 接收页面触发的updatePageScrollTop方法，传给z-paging
	const updatePageScrollTop = (data) => {
		paging.value.updatePageScrollTop(data);
	}
	
	// 接收页面触发的pageReachBottom方法，传给z-paging
	const pageReachBottom = () => {
		paging.value.pageReachBottom();
	}
	
	// 接收页面触发的doChatRecordLoadMore方法，传给z-paging
	const doChatRecordLoadMore = () => {
		paging.value.doChatRecordLoadMore();
	}
	*/

defineExpose({ reload, complete });
</script>
